<template>
  <div>
    <div class="nav-left-header">
      <img src="../../assets/logo.png">
      <h3 style="height:20px;line-height:20px;color:#fff">学生个性化画像系统</h3>
    </div>
    <el-menu
      router
      default-active="/home/dataTest"
      @open="handleOpen"
      @close="handleClose"
      background-color="#132441"
      text-color="#667ba0"
      active-text-color="#b9d5ef"
      style="border:1px solid #132441"
    >
      <el-menu-item index="/home/dataTest">
        <i class="el-icon-setting"></i>
        <span slot="title">测试数据集</span>
      </el-menu-item>
      <el-menu-item index="/home/stuPic">
        <i class="el-icon-setting"></i>
        <span slot="title">学生画像接口</span>
      </el-menu-item>
    </el-menu>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        crawlerList: {
          projects: [],
          data: []
        }
      }
    },
    created() {
      // this.crawlerListGet()
    },
    methods: {
      handleOpen(key, keyPath) {
        // let titleList = document.getElementsByClassName('el-submenu__title')

        // console.log(titleList[key -1].style.background = "#172e51" );
        // console.log(titleList)
      },
      handleClose(key, keyPath) {
        //   let titleList = document.getElementsByClassName('el-submenu__title')
        //   console.log(titleList[key -1].style.background = "#142039" );
      },
      crawlerListGet() {
        this.$http.get('/crawler/index/').then(
          response => {
            this.crawlerList.projects = response.data.projects
            this.crawlerList.projects_spiders = response.data.projects_spiders
            this.$router.push({
              path: '/home/crawlerManage/',
              query: {
                project: this.crawlerList.projects[0]
              }
            })
          }
        )
      }
      // crawlerGet() {
      //   this.$http.get('/crawler/').then(
      //     response => {
      //       this.crawlerList.data = response.data.spiders
      //       this.crawlerList.project = response.data.project
      //     }
      //   )
      // }
    }
  }

</script>

<style>
  i {
    color: #667aa0;
    padding-right: 10px;
  }

  .nav-left-header img {
    width: 180px;
  }

</style>
